<template>
    <ul class="menu-area" :style="menuCommonStyle">
        <template v-for="menuInfo of menuList" :key="menuInfo.code">
            <al-sub-menu
                v-if="menuInfo.children && menuInfo.children.length > 0"
                :menuItem="menuInfo"
                :selectedKeys="selectedKeys"
                v-bind="$attrs"
            />
            <al-menu-item v-else :menuItem="menuInfo" :selectedKeys="selectedKeys" v-bind="$attrs" />
        </template>
    </ul>
</template>
<script>
    import { defineComponent, ref, computed, watch } from 'vue'
    import AlSubMenu from './sub-menu'
    import AlMenuItem from './menu-item'

    export default defineComponent({
        name: 'alMenu',
        components: { AlSubMenu, AlMenuItem },
        props: {
            menuList: {
                type: Array,
                default: () => []
            },
            listMap: {
                type: Object,
                default: () => ({})
            },
            fontSize: {
                type: Number,
                default: 14
            }
        },
        setup(props, { expose }) {
            const routes = getCurrentPages()
            const currentRoute = routes[routes.length - 1].route
            const selectedKeys = ref('')
            watch(
                () => [currentRoute, props.listMap],
                () => {
                  // 开发环境 currentRoute 获取的是对象实例，需要在meta.route中获取路径，线上环境获取的直接是路径
                    const currentPage = currentRoute?.meta?.route ? currentRoute.meta.route : currentRoute
                    selectedKeys.value = props.listMap[currentPage]
                },
                {
                    deep: true,
                    immediate: true
                }
            )
            const popShow = ref(false)
            const setNavPopup = () => {
                popShow.value = true
            }
            expose({
                setNavPopup
            })
            const menuCommonStyle = computed(() => {
                return {
                    fontSize: props.fontSize + 'px'
                }
            })
            return {
                popShow,
                setNavPopup,
                menuCommonStyle,
                selectedKeys
            }
        }
    })
</script>
<style lang="less" scoped>
    .menu-area {
        padding: 0;
        font-size: 14px;
    }
</style>
